<!--
 * @description: 国际化
 * @Author: Islands
 * @Date: 2023-12-06 12:32:54
 * @LastEditTime: 2024-03-25 22:08:28
-->
<script lang='ts' setup>
import { storeToRefs } from 'pinia';
import { ArrowDown } from '@element-plus/icons-vue';
import SvgIcon from '@/components/svg-icon/index.vue';
import { useLocalStore } from '@/store/index'
import { useI18n } from 'vue-i18n';
import {ILanguage} from '@/types/index.d';
import {LanguageConstant} from '@/constant/index';
const { locale } = useI18n();
const { language } = storeToRefs(useLocalStore())
const handleCommand = (command: ILanguage) => {
    locale.value = command.value;
    language.value = command
}
defineProps({
    constant: { type: Array<ILanguage>, default: LanguageConstant },
});
</script>
<template>
    <div class="i18n">
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                <svg-icon  :icon="language.icon" pointerStyle="pointer" size="2em" />
                {{ language.label }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <template v-for="item in constant">
                        <el-dropdown-item :command="item">
                            <svg-icon  :icon="item.icon" pointerStyle="pointer" size="2em" />
                            {{ item.label }}
                        </el-dropdown-item>
                    </template>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<style lang='scss'  scoped>
.i18n {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
    font-weight: bold;
    width: 120px;
    overflow: hidden;
}
</style>